<template>
  <div class="teach">
    <div class="header">
      <p @click="back">
        <Icon name="arrow-left" />
      </p>
      <p>讲师详情</p>
      <p></p>
    </div>
    <div class="head_con">
      <div class="c">
        <img class="img" :src="tea.avatar" alt />
        <div class="teach_main">
          <p class="name">
            <span style="color:#000">{{tea.teacher_name}}</span>
            <font color="orange">{{tea.level_name}}</font>
          </p>
          <p class="sex">
            <span>{{tea.sex|sex}}</span>
            <span>{{tea.teach_age}}年教龄</span>
          </p>
        </div>
        <p>
          <button class="btn" v-if="this.flag==1" @click="getLike">关注</button>
          <button class="btns" v-else @click="getLike">已关注</button>
        </p>
      </div>
      <div class="d">
        <div v-for="(item,index) in nic" :key="index">{{item}}</div>
      </div>
    </div>

    <div class="tab">
      <Tabs v-model="active" @click="onJs">
        <Tab class="tab_1" title="讲师介绍">
          <div>
            <p>教学年龄</p>
            <p v-for="(item,index) in teaJsAge" :key="index">{{item.attr_value_name}}</p>
          </div>
          <div>
            <p>授教价格</p>
            <p v-for="(item,index) in teaJsPrice" :key="index">{{item.attr_value_name}}</p>
          </div>
          <div>
            <p>老师简介</p>
            <p>{{teaJs.intro}}</p>
          </div>
        </Tab>
        <Tab title="讲师课程" class="tab_2">
          <div class="jing">
            <div class="jing_for" v-for="(item,index) in home3" :key="index">
              <p>{{item.title}}</p>
              <p class="p_small">共1课时</p>
              <p class="p_main" v-for="(itemd,index) in item.teachers_list" :key="index">
                <img class="jing_img" :src="itemd.teacher_avatar" alt />
                <span>{{itemd.teacher_name}}</span>
              </p>
              <p class="p_finaly">
                {{item.sales_num}}人已报名
                <span v-if="item.price == 0">免费</span>
                <span v-else>￥{{item.price}}</span>
              </p>
            </div>
          </div>
        </Tab>
        <Tab title="学员评价">
          <div class="kc_title">
            课程评论
            <div class="pinglun" v-for="(item,index) in pingjia" :key="index">
              <div>
                <img :src="item.avatar" alt />
              </div>
              <div>
                <p>
                  <span class="star">
                    <Rate
                      v-model="value"
                      :size="12"
                      color="#ffd21e"
                      void-icon="star"
                      void-color="#eee"
                    />
                  </span>
                </p>
                <p class="con">{{item.content}}</p>
                <!-- <div class="card">
                  <p v-for="(item,index) in nic" :key="index">{{item}}</p>
                </div>-->
              </div>
              <div class="time">{{item.created_at}}</div>
            </div>
          </div>
        </Tab>
      </Tabs>
    </div>
  </div>
</template>

<script>
import { Icon, Tab, Tabs, Rate, Toast } from "vant";
import {
  getTeach,
  getTeachJs,
  teacherMainCourse,
  teacherComment,
  teachgoCom,
} from "../../https/https";
export default {
  components: {
    Icon,
    Tab,
    Tabs,
    Rate,
  },
  filters: {
    sex(val) {
      if (val == 1) {
        return "女";
      } else {
        return "男";
      }
    },
  },
  data() {
    return {
      value: 5,
      tea: {},
      nic: [],
      active: 0,
      teaJs: {},
      teaJsAge: [],
      teaJsPrice: [],
      home3: [],
      pingjia: [],
      tag: [],
      id: 0,
      flag: null,
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    getTeach(this.id).then((res) => {
      console.log(res);
      this.tea = res.teacher;
      this.nic = res.teacher.tag_content;
      if (res.flag == 2) {
        this.flag = 1;
      } else {
        this.flag = 2;
      }
    });
    getTeachJs(this.id).then((res) => {
      // console.log(res);
      this.teaJs = res;
      this.teaJs.attr.forEach((ele) => {
        if (ele.attr_name == "教学年龄") {
          this.teaJsAge = ele.attr_value;
        } else if (ele.attr_name == "授课价格") {
          this.teaJsPrice = ele.attr_value;
        }
      });
    });
  },
  methods: {
    getLike() {
      console.log(this.id);
      teachgoCom(this.id).then((res) => {
        // console.log(res);
        this.flag == res.flag;
        if (this.flag == 1) {
          Toast.success("已关注");
          this.flag = 2;
          console.log(this.flag);
        } else {
          Toast.success("取消关注");
          this.flag = 1;
          console.log(this.flag);
        }
      });
    },
    back() {
      this.$router.go(-1);
    },
    onJs() {
      // var id = this.tea.id;
      if (this.active == 1) {
        teacherMainCourse(this.id).then((res) => {
          // console.log(res);
          this.home3 = res.list;
        });
      } else if (this.active == 2) {
        teacherComment({
          limit: 10,
          page: 1,
          teacher_id: this.id,
        }).then((res) => {
          console.log(res);
          this.pingjia = res.comment.list;
          this.tag = res.tag;
        });
      }
    },
  },
};
</script>

<style scoped>
.teach {
  background-color: #eee;
  padding-bottom: 150px;
}
.header {
  width: 100%;
  height: 100px;
  background: linear-gradient(180deg, #63b7fe, #4e7de3);
  display: flex;
  justify-content: space-between;
}
.header > p {
  padding-top: 10px;
  color: #ffffff;
  font-size: 18px;
}
.head_con {
  width: 90%;
  height: 120px;
  border-radius: 10px;
  background-color: #ffffff;
  margin: 0 auto;
  margin-top: -50px;
  padding: 15px 0 0 15px;
}
.img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.c {
  display: flex;
}
.teach_main > p {
  margin-left: 10px;
  margin-top: 5px;
  color: #999;
}
.btn {
  width: 60px;
  height: 25px;
  border-radius: 20px;
  background-color: #eee;
  border: 1px solid orange;
  color: red;
  margin-left: 100px;
  margin-top: 10px;
}
.btns {
  width: 60px;
  height: 25px;
  border-radius: 20px;
  background-color: #eee;
  border: 1px solid #999;
  color: #666;
  margin-left: 100px;
  margin-top: 10px;
}
.d {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
}
.d > div {
  padding: 3px 5px;
  margin: 3px;
  border-radius: 5px;
  background-color: orange;
  color: #fff;
}
.tab {
  margin-top: 20px;
  background-color: #fff;
}
.tab_1 > div {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 20px;
}
.tab_1 > div > p {
  margin-left: 15px;
  margin-top: 15px;
  color: #666;
}
.jing {
  background-color: #f4f4f4;
  overflow: hidden;
}
.jing_for {
  width: 90%;
  height: 180px;
  margin: 10px auto;
  margin-bottom: 10px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #ffffff;
  font-size: 16px;
}
.jing_for > p {
  margin-left: 15px;
  margin-top: 15px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.p_main {
  display: flex;
  align-items: center;
}
.p_small {
  color: #999;
  font-size: 12px;
}
.p_main span {
  color: #999;
  font-size: 12px;
  margin-left: 20px;
}
.jing_img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.p_finaly {
  padding-top: 5px;
  padding-right: 10px;
  border-top: 1px solid #999;
  color: #666;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}
.p_finaly span:nth-child(2) {
  font-size: 16px;
  color: green;
}
.pinglun {
  width: 100%;
  height: 100px;
  margin-top: 10px;
  padding-bottom: 10px;
  display: flex;
  position: relative;
  border-bottom: 1px solid #eee;
}
.star {
  margin-left: 10px;
}
.con {
  color: #999;
}
.time {
  color: #999;
  font-size: 12px;
  margin-left: 10px;
  position: absolute;
  right: 10px;
  top: 5px;
}
.pinglun > div:nth-child(2) {
  font-size: 12px;
}
.pinglun > div:nth-child(2) > p {
  height: 25px;
  margin-left: 10px;
  line-height: 25px;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.pinglun img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.kc_title {
  font-size: 16px;
  color: #000000;
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
}
</style>